<template>
	<view class="container">	
		<!--搜索栏-->
		<view class="search-section">
			<view class="search-box">
				<image src="/static/search.png" class="search-icon" />
				<input 
					class="search-input" 
					placeholder="搜索物料名称或编码" 
					v-model="searchKeyword"
					@input="onSearch"
				/>
			</view>
			<view class="filter-btn" @click="showFilter = true">
				<image src="/static/settings.png" class="filter-icon" />
				<text>筛选</text>
			</view>
		</view>
		
		<!--统计卡片-->
		<view class="stats-section">
			<view class="stat-card">
				<text class="stat-number">1,234</text>
				<text class="stat-label">总库存</text>
			</view>
			<view class="stat-card">
				<text class="stat-number">89</text>
				<text class="stat-label">低库存</text>
			</view>
			<view class="stat-card">
				<text class="stat-number">12</text>
				<text class="stat-label">缺货</text>
			</view>
		</view>
		
		<!--库存列表-->
		<view class="list-section">
			<view class="list-header">
				<text class="list-title">库存列表</text>
				<text class="list-count">共 {{filteredList.length}} 项</text>
			</view>
			
			<view class="inventory-list">
				<view 
					class="inventory-item" 
					v-for="(item, index) in filteredList" 
					:key="index"
					@click="viewDetail(item)"
				>
					<view class="item-left">
						<image :src="item.image" class="item-image" />
						<view class="item-info">
							<text class="item-name">{{item.name}}</text>
							<text class="item-code">编码: {{item.code}}</text>
							<text class="item-category">{{item.category}}</text>
						</view>
					</view>
					<view class="item-right">
						<view class="stock-info">
							<text class="stock-number" :class="getStockClass(item.stock)">{{item.stock}}</text>
							<text class="stock-unit">{{item.unit}}</text>
						</view>
						<view class="stock-status" :class="getStatusClass(item.stock, item.minStock)">
							{{getStatusText(item.stock, item.minStock)}}
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!--筛选弹窗-->
		<view class="filter-modal" v-if="showFilter" @click="showFilter = false">
			<view class="filter-content" @click.stop>
				<view class="filter-header">
					<text class="filter-title">筛选条件</text>
					<text class="filter-close" @click="showFilter = false">×</text>
				</view>
				<view class="filter-body">
					<view class="filter-item">
						<text class="filter-label">库存状态</text>
						<view class="filter-options">
							<view 
								class="filter-option" 
								:class="{active: selectedStatus === 'all'}"
								@click="selectedStatus = 'all'"
							>全部</view>
							<view 
								class="filter-option" 
								:class="{active: selectedStatus === 'normal'}"
								@click="selectedStatus = 'normal'"
							>正常</view>
							<view 
								class="filter-option" 
								:class="{active: selectedStatus === 'low'}"
								@click="selectedStatus = 'low'"
							>低库存</view>
							<view 
								class="filter-option" 
								:class="{active: selectedStatus === 'out'}"
								@click="selectedStatus = 'out'"
							>缺货</view>
						</view>
					</view>
					<view class="filter-item">
						<text class="filter-label">物料分类</text>
						<view class="filter-options">
							<view 
								class="filter-option" 
								:class="{active: selectedCategory === 'all'}"
								@click="selectedCategory = 'all'"
							>全部</view>
							<view 
								class="filter-option" 
								:class="{active: selectedCategory === 'tools'}"
								@click="selectedCategory = 'tools'"
							>工具</view>
							<view 
								class="filter-option" 
								:class="{active: selectedCategory === 'parts'}"
								@click="selectedCategory = 'parts'"
							>配件</view>
							<view 
								class="filter-option" 
								:class="{active: selectedCategory === 'materials'}"
								@click="selectedCategory = 'materials'"
							>材料</view>
						</view>
					</view>
				</view>
				<view class="filter-footer">
					<view class="filter-btn-reset" @click="resetFilter">重置</view>
					<view class="filter-btn-confirm" @click="applyFilter">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue';
	const searchKeyword = ref('');
	const showFilter = ref(false);
	const selectedStatus = ref('all');
	const selectedCategory = ref('all');
	
	// 模拟库存数据
	const inventoryList = ref([
		{
			id: 1,
			name: '螺丝刀套装',
			code: 'SD001',
			category: '工具',
			stock: 45,
			minStock: 20,
			unit: '套',
			image: '/static/tools.png'
		},
		{
			id: 2,
			name: '轴承',
			code: 'ZC002',
			category: '配件',
			stock: 8,
			minStock: 15,
			unit: '个',
			image: '/static/parts.png'
		},
		{
			id: 3,
			name: '润滑油',
			code: 'RHY003',
			category: '材料',
			stock: 0,
			minStock: 10,
			unit: '瓶',
			image: '/static/materials.png'
		},
		{
			id: 4,
			name: '扳手',
			code: 'BS004',
			category: '工具',
			stock: 32,
			minStock: 25,
			unit: '把',
			image: '/static/tools.png'
		},
		{
			id: 5,
			name: '密封圈',
			code: 'MFQ005',
			category: '配件',
			stock: 12,
			minStock: 20,
			unit: '个',
			image: '/static/parts.png'
		}
	]);
	
	// 筛选后的列表
	const filteredList = computed(() => {
		let list = inventoryList.value;
		
		// 关键词搜索
		if (searchKeyword.value) {
			list = list.filter(item => 
				item.name.includes(searchKeyword.value) || 
				item.code.includes(searchKeyword.value)
			);
		}
		
		// 状态筛选
		if (selectedStatus.value !== 'all') {
			list = list.filter(item => {
				const status = getStatusType(item.stock, item.minStock);
				return status === selectedStatus.value;
			});
		}
		
		// 分类筛选
		if (selectedCategory.value !== 'all') {
			list = list.filter(item => {
				const categoryMap = {
					'tools': '工具',
					'parts': '配件',
					'materials': '材料'
				};
				return item.category === categoryMap[selectedCategory.value];
			});
		}
		
		return list;
	});
	
	const onSearch = () => {
		// 搜索逻辑已在computed中处理
	};
	
	const getStatusType = (stock: number, minStock: number) => {
		if (stock === 0) return 'out';
		if (stock < minStock) return 'low';
		return 'normal';
	};
	
	const getStatusText = (stock: number, minStock: number) => {
		if (stock === 0) return '缺货';
		if (stock < minStock) return '低库存';
		return '正常';
	};
	
	const getStatusClass = (stock: number, minStock: number) => {
		const status = getStatusType(stock, minStock);
		return `status-${status}`;
	};
	
	const getStockClass = (stock: number) => {
		if (stock === 0) return 'stock-out';
		if (stock < 10) return 'stock-low';
		return 'stock-normal';
	};
	
	const viewDetail = (item: any) => {
		uni.showToast({
			title: `查看${item.name}详情`,
			icon: 'none'
		});
	};
	
	const resetFilter = () => {
		selectedStatus.value = 'all';
		selectedCategory.value = 'all';
	};
	
	const applyFilter = () => {
		showFilter.value = false;
	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		background: #F9FAFB;
		height: 100vh;
	}

	.search-section {
		display: flex;
		align-items: center;
		padding: 24rpx;
		background: #fff;
		gap: 16rpx;
	}

	.search-box {
		flex: 1;
		display: flex;
		align-items: center;
		background: #F5F6FA;
		border-radius: 24rpx;
		padding: 0 20rpx;
		height: 72rpx;
	}

	.search-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 12rpx;
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.filter-btn {
		display: flex;
		align-items: center;
		background: #F5F6FA;
		border-radius: 24rpx;
		padding: 0 20rpx;
		height: 72rpx;
		gap: 8rpx;
	}

	.filter-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.stats-section {
		display: flex;
		padding: 24rpx;
		gap: 16rpx;
	}

	.stat-card {
		flex: 1;
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		text-align: center;
		box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04);
	}

	.stat-number {
		display: block;
		font-size: 36rpx;
		font-weight: bold;
		color: #222;
		margin-bottom: 8rpx;
	}

	.stat-label {
		font-size: 24rpx;
		color: #888;
	}

	.list-section {
		flex: 1;
		padding: 0 24rpx;
	}

	.list-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.list-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #222;
	}

	.list-count {
		font-size: 24rpx;
		color: #888;
	}

	.inventory-list {
		background: #fff;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.inventory-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		border-bottom: 1rpx solid #F5F6FA;
	}

	.inventory-item:last-child {
		border-bottom: none;
	}

	.item-left {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.item-image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 12rpx;
		margin-right: 16rpx;
	}

	.item-info {
		display: flex;
		flex-direction: column;
	}

	.item-name {
		font-size: 28rpx;
		font-weight: 500;
		color: #222;
		margin-bottom: 4rpx;
	}

	.item-code {
		font-size: 24rpx;
		color: #888;
		margin-bottom: 4rpx;
	}

	.item-category {
		font-size: 22rpx;
		color: #b0b0b0;
	}

	.item-right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.stock-info {
		display: flex;
		align-items: baseline;
		margin-bottom: 8rpx;
	}

	.stock-number {
		font-size: 32rpx;
		font-weight: bold;
		margin-right: 4rpx;
	}

	.stock-normal {
		color: #52c41a;
	}

	.stock-low {
		color: #faad14;
	}

	.stock-out {
		color: #ff4d4f;
	}

	.stock-unit {
		font-size: 24rpx;
		color: #888;
	}

	.stock-status {
		font-size: 22rpx;
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
	}

	.status-normal {
		background: #f6ffed;
		color: #52c41a;
	}

	.status-low {
		background: #fffbe6;
		color: #faad14;
	}

	.status-out {
		background: #fff2f0;
		color: #ff4d4f;
	}

	.filter-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 1000;
		display: flex;
		align-items: flex-end;
	}

	.filter-content {
		background: #fff;
		border-radius: 24rpx 24rpx 0 0;
		width: 100%;
		max-height: 80vh;
	}

	.filter-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		border-bottom: 1rpx solid #F5F6FA;
	}

	.filter-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #222;
	}

	.filter-close {
		font-size: 40rpx;
		color: #888;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.filter-body {
		padding: 24rpx;
	}

	.filter-item {
		margin-bottom: 32rpx;
	}

	.filter-label {
		display: block;
		font-size: 28rpx;
		font-weight: 500;
		color: #222;
		margin-bottom: 16rpx;
	}

	.filter-options {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
	}

	.filter-option {
		padding: 12rpx 24rpx;
		border-radius: 24rpx;
		font-size: 26rpx;
		background: #F5F6FA;
		color: #666;
	}

	.filter-option.active {
		background: #1890ff;
		color: #fff;
	}

	.filter-footer {
		display: flex;
		padding: 24rpx;
		gap: 16rpx;
		border-top: 1rpx solid #F5F6FA;
	}

	.filter-btn-reset {
		flex: 1;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx solid #ddd;
		border-radius: 16rpx;
		font-size: 28rpx;
		color: #666;
	}

	.filter-btn-confirm {
		flex: 1;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #1890ff;
		border-radius: 16rpx;
		font-size: 28rpx;
		color: #fff;
	}
</style>